マテリアルデザインに魂を売った男の末路 光と影編
執筆者：中山大悟
執筆年：2018年
※主は英語が得意ではありません。
赤文字は間違った例
黄色文字は好ましくない例
緑文字は正しい例
光と影(Light and Dark)
マテリアルサーフェスは、光源を遮ると影を投影します。
光(Light)
光と影
マテリアルデザインの環境では、仮想ライトがUIを照らします。
キーライトは、キーシャドウと呼ばれるシャープな方向性シャドウを作成します。
アンビエントライトは、アンビエントシャドウと呼ばれる拡散した柔らかいシャドウを作成するために、すべての角度から表示されます。
https://material.io/design/assets/1OUh2ErnYqT5D-NLaoGT7gE6UJoRc0E_x/lightshadows-1.png https://material.io/design/assets/1sVM3CJoX1G8U558BnRJzNlVZR9XEm4US/lightshadows-2.png
左の画像はキーライトで影を投影した例です。
右の画像はアンビエントライトで影を投影した例です。
https://material.io/design/assets/1GX80Wn2YAy2ClCCzmNYY13ThhqL3FQw6/lightshadows-3.png https://material.io/design/assets/1g2AkRSqZTl0AkKYvVUkR49Um1l2nax8c/lightshadows-4.png
左の画像はキーとアンビエントライトの組み合わせた例です。
右の画像はダークテーマでたとえ目立たない場合でも、シャドウを使用することを示す例です。
光源
マテリアル環境の影は、キーライトとアンビエントライトによって投影されます。 AndroidおよびiOS開発では、光源がz軸に沿ったさまざまな位置でマテリアルサーフェスによってブロックされると影が発生します。 ウェブ上では、影はy軸だけを操作することによって描かれています。 次の例は、標高が6dpのカードを示しています。
https://material.io/design/assets/1gdBm3vMdzK_7V58bYKRvcP9nPgk8uQHD/whatismaterial-environment-shadow1.png
キーライトで影を投影
https://material.io/design/assets/1t69XYTIMdo-9-w28Y9OOkf2Gg2M-GPor/whatismaterial-environment-shadow2.png
アンビエントライトで影を投影
https://material.io/design/assets/1D52WT32otT1UhpKQB5-8311ZG8cfFexG/whatismaterial-environment-shadow3.png
キーとアンビエントライトの組み合わせで影を投影
影(Shadow)
影は、深さ、動きの方向、およびサーフェスのエッジを提供します。
サーフェスの影は、その高さと他のサーフェスとの関係によって決まります。
使用法
シャドウはサーフェス間のElevationの程度を表すため、製品全体で一貫して使用する必要があります。
https://material.io/design/assets/1FjW7ZT_MD39eQlLf2hy_hKwCvXmRe4qo/shadowprinciples-do-1.png
Elevationは、一貫した影の使用によって表されます。
https://material.io/design/assets/0B6xUSjjSulxcLW9wYkdGUUdhTWc/shadowprinciples-do-2.png
影の大きさはElevationを反映します。 より高い隆起部のサーフェスはより大きな影を有し、より低い隆起部のサーフェスはより小さい影を有する。
https://material.io/design/assets/0B8wSqcLwbhFuaWRHLU9ldThVZlk/shadowprinciples-basil-1c.mp4プロダクトが影を使用しない場合は、視差の動きなど、他の方法で標高を伝えます。
https://material.io/design/assets/1lUqfq3Tt1qRQxZAn9gkROKMysc7G9Mhc/shadowprinciples-list.mp4影の外観は、リスト項目が選択されたことを示し、この並べ替えの相互作用中に前に移動することができます。
影とモーション
影は、サーフェスの移動方向とサーフェス間の距離が増減しているかどうかを示す有用な手がかりを提供します。
https://material.io/design/assets/0B8wSqcLwbhFuNTI1RWpwa1VwV1E/shadowsmotion-do-1a.mp4サーフェスがシェイプやスケールを変更しても、サーフェスのElevationが変わらない場合、そのシャドウは変更されません。
https://material.io/design/assets/0B8wSqcLwbhFuYmFPT3hZVjNWREU/shadowsmotion-dont-1a.mp4サーフェスのElevationが変わればそのサーフェスの影も必然的に変わります。
光と影のガイドラインは以上で終了です。
今回は短かったですね（笑）
ただ、影についてはSarfaceとElevationのガイドライでも頻繁に触れられているので、合わせて確認しておきましょう
次回はいよいよ「レイアウト」のガイドラインです！いよいよデザインと云った感じですね。